<template>
  <div class="ipo_detail">
    <CustomNavBar :title="t('IPO detail')"></CustomNavBar>
    <div class="record-list">
      <div class="record-item">
        
      <div class="record-item-title name" >{{ detail.name }}

        <span  >
          {{detail.exchange}}<span v-if="detail.ticker"> . {{ detail.ticker }}</span>
        </span>
      </div>
      <div class="record-item-content">
        <div class="record-item-content-item">
          <div class="record-item-content-item-top">{{t('Release time period')}}</div>
          <div class="record-item-content-item-bottom upper">{{ date(detail.start_time) }}<br>{{ date(detail.end_time) }}</div>
        </div>
        <div class="record-item-content-item">
          <div class="record-item-content-item-top">{{t('Price')}}</div>
          <div class="record-item-content-item-bottom amount upper">₹{{ detail.price }}</div>
        </div>
        <div class="record-item-content-item">
          <div class="record-item-content-item-top">
            {{t('Quantity of applications')}}
          </div>
          <div class="record-item-content-item-bottom upper">{{decimalpre(detail.apply_quantity)}}</div>
        </div>
        <div class="record-item-content-item">
          <div class="record-item-content-item-top">
           {{t(' Actual number of lots won')}}
          </div>
          <div class="record-item-content-item-bottom upper">{{detail.win_quantity ? decimalpre(detail.win_quantity) : '--'}}</div>
        </div>
        <div class="record-item-content-item">
          <div class="record-item-content-item-top">{{t('Status')}}</div>
          <div class="record-item-content-item-bottom upper">{{statusMap[detail.status]}}</div>
        </div>
        <div class="record-item-content-item">
          <div class="record-item-content-item-top">{{t('Creation time')}}</div>
          <div class="record-item-content-item-bottom upper">{{date((detail.listed_time || detail.lwr_time), 'DD/MM/YYYY')}}</div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { get } from '@/utils/request'
import { useRoute } from 'vue-router'
import { showLoadingToast, closeToast } from 'vant'
import { date, decimalpre } from '@/utils/util'
import { t } from '@/languages'
// type是ipo类型：0=可申购，首次公开募股（initial public offer），1=待分配(appending location)，2=待上市(appending listing),3=上市(listed)
const routes = useRoute()
const detail = ref({})
const statusMap = {
  0: 'Initial Public Offer', 
  1: 'Appending Location',
  2: 'Appending Listing',
  3: 'Listed'
}
async function getDetail() {
  try {
    showLoadingToast()
    const res = await get(`/api/app/ipo/${routes.query.id}/`)
    detail.value = res || {}
  } catch (error) {
    
  } finally {
    closeToast()
  }
}
getDetail()
</script>

<style lang="scss" scoped>
  .record-list {
  padding: 0.26667rem 0.13333rem;
}
// #c6e9ff
.record-list .record-item {
  border-radius: 0.13333rem;
  border: 0.02667rem solid #2b4e5a;
  background: #0e1822;
  margin: 0.26667rem;
  padding: 0.26667rem;
}

.record-item-title {
  padding: 0.13333rem 0;
  text-align: left;
   color: #62d8bf;
   font-weight: 600;
}


.record-list .record-item .record-item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.26667rem;
}

.record-list .record-item .record-item-content .record-item-content-item {
  display: flex;
  justify-content: flex-start;
  // align-items:;
  flex-direction: column;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-top {
  padding: 0.26667rem 0;
  font-size: 0.37333rem;
  text-align: center;
  height: 1.5rem;
  vertical-align: top;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-top .record-item-content-item-top-buy {
  background-color: #62f792;
  color: #0d111a;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.13333rem;
  width: 3.2rem;
  font-weight: 600;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-bottom {
  font-size: 0.37333rem;
  text-align: center;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-bottom .record-item-content-item-bottom-details {
  color: #a5a4a4;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #325d79;
  width: 3.2rem;
}
</style>